<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

    <style type="text/css">
        * {
            margin:0;
            padding: 0;            
        }
        
        body {
            position: relative;
        }

        .leftSide {
            width: 200px;
            height: 400px;
            font-size: 15px;
            color: white;
            background-color: #181f48;
            position: absolute;
            left: 20px;
            top: 20px;
        }

        li {
            list-style-type: none;
        }

        .firstLayer > li {
            padding-bottom: 8px; 
            padding-top: 8px;
            width: 100%;
        }

        .firstLayer li{
            margin-top: 20px;
            padding-left: 1.5em;
        }

        .secondLayer li{
            padding-left: 2em;
        }

        .thirdLayer li{
            padding-left: 4em;
        }

        .leftSide li span {
            padding-right: 10px;
        }

        .strong {
            background-color: #404669;
        }

    </style>
</head>
<body>
    <div class="leftSide">
        <ul class="firstLayer">
            <li class="strong">
                <span class="glyphicon glyphicon-certificate"></span><span>个人报表</span>
                <ul class="secondLayer">
                    <li>
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="glyphicon glyphicon-folder-open"></span>
                        <span>文件1</span>
                    </li>

                    <li>
                        <span class="glyphicon glyphicon-chevron-down"></span>
                        <span class="glyphicon glyphicon-folder-open"></span>
                        <span>文件2</span>
                        <ul class="thirdLayer">
                            <li>
                                <span class="glyphicon glyphicon-list-alt"></span>
                                <span>文档1</span>
                            </li>
                            <li>
                                <span class="glyphicon glyphicon-list-alt"></span>
                                <span>文档2</span>
                            </li>
                        </ul>
                    </li>
                        
                    <li><span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="glyphicon glyphicon-folder-open"></span>
                        <span>文件3</span>
                    </li>
                </ul>
            </li>
                
            <li>
                <span class="glyphicon glyphicon-star"></span>
                <span>个人收藏</span>
            </li>
        </ul>
    </div>
</body>
</html>